<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="../head.jsp">
	<jsp:param value="修改毕业生就业信息" name="title" />
</jsp:include>
<script type="text/javascript"
	src="${basePath}My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
	function provincesChange(target) {
		var cityEl = document.getElementById("city");
		var areaEl = document.getElementById("area");
		
		cityEl.innerHTML = "";
		areaEl.innerHTML = "";
		ajax({
			url : "selector?type=city&province=" + target.value,
			callback : function(xhr) {
				var data;
				//两种方式
				//JSON.parse(xhr.response);
				if (window.JSON) {
					data = JSON.parse(xhr.response);
				} else {
					data = eval("(" + xhr.response + ")");
				}
				if (data) {
					for (var i = 0; i < data.length; i++) {
						var item = data[i];
						var op = document.createElement("option");
						op.value = item.id;
						op.innerText = item.city;
						cityEl.appendChild(op);
					}

					cityChange(cityEl);
				}
			}
		});
	}

	function cityChange(target) {
		var areaEl = document.getElementById("area");
		areaEl.innerHTML = "";
		ajax({
			url : "selector?type=area&city=" + target.value,
			callback : function(xhr) {
				var data;
				//两种方式
				//JSON.parse(xhr.response);
				if (window.JSON) {
					data = JSON.parse(xhr.response);
				} else {
					data = eval("(" + xhr.response + ")");
				}
				if (data) {
					for (var i = 0; i < data.length; i++) {
						var item = data[i];
						var op = document.createElement("option");
						op.value = item.id;
						op.innerText = item.area;
						areaEl.appendChild(op);
					}
				}
			}
		});
	}
	$(function() {
		var workspace = "${graduate.gradWorkplace}";
		if (workspace) {
			$("#oooo").css("display", "none");
			$("#company").css("display", "none");
			$("#salary").css("display", "none");
			$("#time").css("display", "none");
		} else {
			$("#p1").css("display", "none");
			$("#p2").css("display", "none");
			$("#p3").css("display", "none");
			$("#p4").css("display", "none");
			$("#oooo").css("display", "block");
			$("#company").css("display", "block");
			$("#salary").css("display", "block");
			$("#time").css("display", "block");
		}
		$("#xiugai1").on("click", function() {
			$("#p2").css("display", "none");
			$("#p3").css("display", "none");
			$("#oooo").css("display", "block");
			$("#company").css("display", "block");
			$("#salary").css("display", "block");
		});
		$("#xiugai2").on("click", function() {
			$("#p3").css("display", "none");
			$("#company").css("display", "block");
			$("#salary").css("display", "block");
		});
		$("#xiugai3").on("click", function() {
			$("#salary").css("display", "block");
		});

	});
</script>
</head>
<body>
	<div class="main-content" class="margin-left-50 margin-top-50">
		<form class="ui form segment" method="post" style="width: 500px">

			<div class="field">
				<p>
					<label style="font-size: 25px;">姓名:</label> <span
						style="font-size: 20px;">${graduate.gradName}</span>
				</p>
				<p id="p1">
					<label style="font-size: 25px;">工作地址:</label> <span
						style="font-size: 20px;">${graduate.gradWorkplace}</span>
					&nbsp;&nbsp;&nbsp;<a id="xiugai1">修改</a>
				</p>
				<p id="p2">
					<label style="font-size: 25px;">公司名称:</label> <span
						style="font-size: 20px;">${graduate.gradCompany}</span>
					&nbsp;&nbsp;&nbsp;<a id="xiugai2">修改</a>
				</p>
				<p id="p3">
					<label style="font-size: 25px;">薪水:</label> <span
						style="font-size: 20px;">${graduate.gradSalary}</span>
					&nbsp;&nbsp;&nbsp;<a id="xiugai3">修改</a>
				</p>

			</div>
			<div id="oooo">
				<div style="margin-top: 20px">
					<select class="ui dropdown" onchange="provincesChange(this)"
						id="provinces" name="province" value="${param.province }">
						<option value="">请选择省份</option>
						<c:forEach items="${provinces}" var="p">
							<option value="${p.id}">${p.province}</option>
						</c:forEach>
					</select> <select name="city" value="${param.city } " class="ui dropdown"
						style="margin-top: 20px" id="city" onchange="cityChange(this)">
						<c:if test=""></c:if>
						<option value="">请选择城市</option>
					</select> <select name="area" value="${param.area }" class="ui dropdown"
						style="margin-top: 20px" id="area">
						<option value="">请选择区域</option>
					</select>
				</div>
			</div>
			<div class="field" style="margin-top: 20px" id="company">
				<label>公司名称</label> <input name="company" type="text"
					value="${param.company }">
			</div>
			<div class="field" style="margin-top: 20px" id="salary">
				<label>薪水</label> <input name="salary" type="text"
					value="${param.salary }">
			</div>
			<div class="field" style="margin-top: 20px" id="time">
				<label>时间</label> <input name="time" type="text"
					value="${param.time }" onclick="WdatePicker()">
			</div>
			<p id="p4">
				<label style="font-size: 25px;">就业时间:</label> <span
					style="font-size: 20px;">${graduate.gradJobTime}</span>
			</p>
			<button class="ui blue  button">提交</button>${error}
		</form>
	</div>
</body>
</html>